<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
    <title>千锋-萍乡学院-小米商城-首页</title>
    <meta charset="UTF-8">
    <link rel="icon" href="Images/logo_favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.sorted.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script type="text/javascript" src="js/ckform.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <style type="text/css">
        body {
            padding-top: 140px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
            font-family: "微软雅黑";
            background: url("img/register123.png");
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .form-signin {
            max-width: 400px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
            background: rgba(255,255,255,0.5);
        }

        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
            font-size: 24px;
            margin-left: 90px;
        }

        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }


        #message{
            font-size: 14px;
            color:red;
            margin-left: 40px;
        }

        .input-block-level{
            width: 300px;
            margin-left: 40px;
        }
        .input-medium{
            margin-left: 40px;
        }
        .code_images{
            width: 115px;
            height: 35px;
            margin-top: -15px;
            margin-left: 10px;
        }
        .error{
            color: red;
            font-size: 12px;
        }

    </style>
</head>
<body onkeydown="onKeyDown();">
<div></div>
<div class="container">
    <form id="tv_login" class="form-signin" method="post" style="border-radius: 10px;" action="${pageContext.request.contextPath}/userServlet">
        <input type="hidden" name="mark" value="checkLogin">
        <h2 class="form-signin-heading" style="width: 100%;margin-left: 0;text-align: center;">登录系统</h2>
        <span id="message" class="message" style="font-size: 13px;">${msg}</span><br>
        <input type="text" name="username" class="input-block-level" value="" placeholder="账号" style="border-radius: 10px;">
        <input type="password" name="password" class="input-block-level" placeholder="密码" value="" style="border-radius: 10px;">
        <input type="text" name="verify" class="input-medium" placeholder="验证码" style="border-radius: 10px;">
        <img id="code" class="code_images"  src="${pageContext.request.contextPath}/img/3HW7.jpg" style="border-radius: 10px;"/>
        <p style="text-align: center;">
            <input id="login" type="button" value="登录" name="login" class="btn btn-large btn-primary" onclick="sub();"  style="width: 150px;border-radius: 10px;"/>
            &nbsp;&nbsp;<a href="${pageContext.request.contextPath}/register.jsp">先注册</a>
        </p>
        <a href="${pageContext.request.contextPath}/admin/login.jsp">管理员登录</a>
    </form>
</div>
<script type="text/javascript">
    /**
     * 点击生成动态图片
     */
    $("#code").click(function (){
        //发送请求去servlet中获取图片
        this.src="${pageContext.request.contextPath}/codeServlet?date="+new Date();
    });

    /**
     * 首次加载的时候生成图片
     */
    function checkImg() {
        var code=document.getElementById("code");
        code.src="${pageContext.request.contextPath}/codeServlet?date="+new Date();
    }
    //调用方法
    $(document).ready(function () {
        checkImg();

    })

    /**
     * 登录功能的前端实现
     * 当点击登录时
     */
    <%--$("#login").click(function () {--%>
    <%--});--%>
    function sub() {
            //获取用户名
            var user=$("input[name='username']").val();
            //非空验证
            if(user==null||user==""){
                $("#message").html("用户名不能为空");
                return; //结束
            }

            //获取密码
            var pwd=$("input[name='password']").val();
            //非空验证
            if(pwd==null||pwd==""){
                $("#message").html("密码不能为空");
                return; //结束
            }

            //获取验证码
            var code=$("input[name='verify']").val();
            //非空验证
            if(code==null||code==""){
                $("#message").html("验证码不能为空");
                return; //结束
            }
            /**
             * 发送ajax请求到后台，验证验证码是否匹配
             * url      请求的地址
             * type     提交方式
             * data     传递的参数
             * dataType 返回值的类型
             * success  成功后的回调
             * error    失败后的回调
             */
            $.ajax({
                "url": "${pageContext.request.contextPath}/userServlet",
                "type": "post",
                "data": {"mark": "checkedCode", "code": code},
                "dataType": "text",
                "success": callBackCode,
                "error": function () {
                    alert("请求失败");
                }
            });
    }
    //成功，返回值
    function callBackCode(data) {
        // alert("验证码："+data);
        if (data=="true"){
            //提交表单
            $("#tv_login").submit();
        }else{
            $("#message").html("验证码有误");
        }
    }
    function onKeyDown() {
        if(event.keyCode==13)
            $("#login").click();
    }
</script>
</body>
</html>